/* the buttons */
//= 按钮的普通样式
.btn {
  @include rect(false, false 1.642857, 5px 14px, 0 1px, $border: $button-border, $background: $button-bg, $display: inb, $radius: 2px);

  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;

  @include font(14px normal $main-color, size weight color);
  @include transition(all 0.3s ease);

  span {
    // @if $button-img-theme == true {
    //   @include sliding($button-bg);
    // }

    // @else {
    //   @include background($button-bg);
    // }

    // display: block;
    // padding: 0 0 0 10px;
    // overflow: visible;
    // white-space: nowrap;

    span {
      // display: block;
      // // @include sliding($button-bg, $offsetX: 100%, $pos: true);

      // padding: 0 10px 0 0;

      // @include height(23px);
    }
  }

  &:hover,
  &:active,
  &:focus {
    text-decoration: none;

    @include background($button-bg-on);
  }

  &:hover,
  &.droping {
    color: $g3;

    span {
      // @include sliding($button-bg-on, $pos: true);

      span {
        // @include sliding($button-bg-on, $offsetX: 100%, $pos: true);
      }
    }
  }

  &:active {
    // position:relative;
    // top:1px;
    // left:1px;

    span {
      // @include sliding($button-bg-act, $pos: true);

      span {
        // @include sliding($button-bg-act, $offsetX: 100%, $pos: true);
      }
    }
  }

  img {
    vertical-align: middle;
  }

  //= 带图标的按钮
  .btn-icon {
    margin: -6px 3px 0 0;

    img {
      margin-top: -2px;
    }
  }

  //= 带下拉的按钮
  .drop-handle {
    width: 14px;
    padding: 0;
    margin: 0 -3px 0 2px;
    background: url(images/#{$arrow-down}) no-repeat 4px 50%;
  }
}

.btn-sm {
  padding: 3px 6px;
  font-size: 12px;
}

.btn-default {
  color: $g3;
  background-color: $gf;
  border-color: $gc;

  &:hover {
    color: $g3;
    background-color: $e6;
    border-color: #adadad;
  }
}

//= 有图标的按钮
.btn-has-icon {
  .icon {
    margin-right: 3px;
  }
}

//= 禁用的按钮
.disabled,
button:disabled {
  &,
  &:hover,
  &:active {
    color: $button-text-color-off;
    cursor: not-allowed;
    background: $button-bg-off;
    border-color: $button-border-off;
  }

  span,
  &:hover span {
    // @include sliding($button-bg-off, $pos: true);

    // color: $g8;

    span {
      // @include sliding($button-bg-off, $offsetX: 100%, $pos: true);
    }
  }
}

//有图标的按钮样式
// .sysiconBtn {
// @include icon-bg(unquote($icon-bg-img));
// background-color:$icon-bg-color;
// @include height(24px);
// margin:1px 3px 0 0;
// padding:4px 10px 2px 20px;
// cursor: pointer;
// color: $g0;
// text-decoration: none;
// border-top: 1px solid $gf;
// border-left: 1px solid $gf;
// border-right: 2px solid #BEC6CE;
// border-bottom: 2px solid #BEC6CE;
// outline:none;
// display:inline;
// font-weight: normal;
// cursor:pointer;

// &:active {
// border-top: 1px solid #DEC6CE;
// border-left: 1px solid #DEC6CE;
// border-right: 2px solid $gf;
// border-bottom: 2px solid $gf;
// }
// }

/* the image tree icon style */
//= 目录树图标
.imgTree {
  padding-right: 8px;
  cursor: pointer;
  border: 0 none;

  @include square(16px);

  @if $imgtree-img-theme {
    background: url(images/#{$imgtree-bg}) no-repeat 50% -107px;
  }

  @else {
    background: unquote($imgtree-bg);
  }
}

//= 子节点打开
.tree_open {
  cursor: default;
  background-position: 50% -126px;
}

/* the order text style */
.orderTextStyle {
  @include rect(22px, 15px, 0 3px);
}

/* the flat button style */
//= 旧按钮样式
// .btn-flat {
//     margin:0 0 0 3px;
//     @include background($noicon-bg-color);
//     padding:4px 4px 2px 4px;
//     cursor: pointer;
//     color: $g0;
//     text-decoration: none;
//     border-top: 1px solid $gf;
//     border-left: 1px solid $gf;
//     border-right: 2px solid #DEC6CE;
//     border-bottom: 2px solid #DEC6CE;
//     display:inline;
//     font-weight: normal;
// }
//= 按钮被按下以后处于编辑状态，无图标样式。具体效果参看在"会员>信息发送管理"
.sentmailsetting .editing {
  background: $gf;
  border-top: 1px solid #dec6ce;
  border-right: 2px solid $gc;
  border-bottom: 2px solid $gc;
  border-left: 1px solid #dec6ce;
}

//= 按钮被按下以后处于编辑状态，有图标样式。具体效果参看"finder"列表中的"列表编辑按钮"
.edit.editing {
  @if $button-img-theme != false {
    @include icon-bg($icon-edit);
  }

  background-color: $gf;
  border-top: 1px solid #dec6ce;
  border-right: 1px solid $gf;
  border-bottom: 1px solid $gf;
  border-left: 1px solid #dec6ce;
}

//= 删除按钮
.delete {
  @if $button-img-theme {
    @include icon-bg($icon-delete);
  }

  @else {
    background: $icon-delete;
  }

  // background-color: $icon-delete-color;
}

img.delete {
  background: none;
}

//= 打印按钮
.print {
  @if $button-img-theme {
    @include icon-bg($icon-print);
  }

  @else {
    background: $icon-print;
  }

  // background-color: $icon-print-color;
}

//= 添加按钮
.add {
  @if $button-img-theme {
    @include icon-bg($icon-add);
  }

  @else {
    background: $icon-add;
  }

  // background-color: $icon-add-color;
}

//= 日历控件图标
.cal {
  @if $button-img-theme {
    @include icon-bg($icon-cal);
  }

  @else {
    background: $icon-cal;
  }
  height: 18px;
  padding-left: 18px;

  // background-color: $icon-cal-color;
  // border-width: 1px;
}

//= 可用的
.enable {
  @if $button-img-theme {
    @include icon-bg($icon-enable);
  }

  @else {
    background: $icon-enable;
  }

  display: block;
  padding: 0 5px;
  text-indent: -9999px;
  // background-color: $icon-enable-color;
}

//= 发短信图标
.sms {
  @if $button-img-theme {
    @include icon-bg($icon-sms);
  }

  @else {
    background: $icon-sms;
  }

  // background-color: $icon-sms-color;
}

//= email图标
.email {
  @if $button-img-theme {
    @include icon-bg($icon-email);
  }

  @else {
    background: $icon-email;
  }

  // background-color: $icon-email-color;
}

input.email {
  background: none;
}

//= 箭头图标
.arrow-up,
.arrow-down,
.arrow-left,
.arrow-right {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: 100% 50%;
}

.arrow-up {
  background-image: url(images/#{$arrow-up});
}

.arrow-down {
  background-image: url(images/#{$arrow-down});
}

.arrow-left {
  background-image: url(images/#{$arrow-left});
}

.arrow-right {
  background-image: url(images/#{$arrow-right});
}

/* the order area and the print button */
.t-del img {
  vertical-align: middle;
}

//= 上传按钮图标
.btn-upload .icon {
  margin: -5px 2px 0 0;
}

//= 底部带分隔线的按钮区域
.table-action {
  padding: 10px 0;

  // @include height(35px);

  margin: 5px 0 0 0;
  clear: both;
  text-align: center;
  border-top: 1px solid #e5e5e5;

  .btn {
    margin: 0 5px;
  }
}

//= 确定/取消按钮通用样式
.btn-primary,
.table-action button[type="submit"] {
  min-width: 40px;
  font-weight: bold;
  color: $button-color-primary;
  background-color: $button-bg-primary;
  border-color: $button-border-primary;

  &:focus,
  &.focus,
  &:hover,
  &:active {
    color: $button-color-primary-on;
    background-color: $button-bg-primary-on;
    border-color: $button-border-primary-on;
  }
}

//= 取消按钮样式
.btn-secondary {
  color: $button-color-secondary;

  span {
    // @include sliding($button-bg-secondary, $pos: true);
  }

  &:hover,
  &:active,
  &:focus {
    color: $button-color-secondary-on;

    span {
      // @include sliding($button-bg-secondary-on, $pos: true);
    }
  }

  &.disabled,
  &:disabled,
  &[disabled] {
    &,
    &:hover,
    &:active {
      // color: $gc;
      // @include sliding($button-bg-secondary-off, $pos: true);

      span {
        // @include sliding($button-bg-secondary-off, $offsetX: 100%, $pos: true);
      }
    }
  }
}

//= 用于报表时间选择按钮
.btn-thirdly {
  // @include height(20px);

  position: relative;
  top: 1px;
  // padding-right: 5px;
  // padding-left: 5px;
  // line-height: 1;
  // color: $gf;

  // span {

  //   padding-left: 5px;
  //   // @include sliding($button-bg-thirdly, $pos: true);

  //   color: $gf;

  //   @include height(20px);

  //   span {
  //     // @include sliding($button-bg-thirdly, $offsetX: 100%, $pos: true);

  //     padding-right: 4px;

  //     @include height(20px);
  //   }
  // }

  // &:hover,
  // &:active {
  //   span {
  //     // @include sliding($button-bg-thirdly-on, $pos: true);

  //     color: $gf;

  //     span {
  //       // @include sliding($button-bg-thirdly-on, $offsetX: 100%, $pos: true);
     
  //     }
  //   }
  // }
}

//= 用于报表时间选择按钮
.btn-fourthly {
  // @include height(22px);

  position: relative;
  top: 1px;
  // padding-right: 5px;
  // padding-left: 5px;
  // line-height: 1;
  color: $g3;

  // span {

  //   padding-left: 5px;
  //   // @include sliding($button-bg-fourthly, $pos: true);

  //   color: $g3;

  //   @include height(22px);

  //   span {
  //     // @include sliding($button-bg-fourthly, $offsetX: 100%, $pos: true);

  //     padding-right: 4px;

  //     @include height(21px);
  //   }
  // }
}

.btn-fourthly:hover,
.btn-fourthly:active,
.btn-fourthly-cur {
  color: $g3;
}

.data-action .btn-fourthly {
  margin-right: 5px;
}

//= 重置文本为左对齐
.no-align-center {
  @include text(left);
}

/* the flat button style */
$blue: #3f70d4;

.btn-flat {
  padding: 0 18px;
  font-size: 12px;
  font-weight: bold;
  line-height: 28px;
  color: $g3;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid $d9;

  @include background($f3);
  @include border-radius(3px);

  &:hover {
    border: 1px solid #c4c4c4;
  }

  &:active,
  &:focus {
    border: 1px solid $blue;
  }

  &.disabled,
  &:disabled {
    color: $g8;
    cursor: not-allowed;
    border: 1px solid $d9;

    @include background($e0);
  }
}

.btn-flat-primary {
  @include background($blue);

  color: $gf;
  border: 1px solid #2f60c3;

  &:hover {
    @include background(#265FD4);

    border: 1px solid #0c4ed4;
  }

  &:active,
  &:focus {
    @include background(#0C4ED4);

    border: 1px solid #0046d4;
  }

  &.disabled,
  &:disabled {
    color: $gf;
    cursor: not-allowed;
    border: 1px solid #88a3d4;

    @include background(#A5B4D4);
  }
}

.btn-flat-danger {
  @include background(#F75349);
  color: $gf;

  border: 1px solid #f71b0e;

  &:hover {
    @include background(#F7372B);

    border: 1px solid #f70e00;
  }

  &:active,
  &:focus {
    @include background(#F71B0E);

    border: 1px solid #f70e00;
  }

  &.disabled,
  &:disabled {
    color: $gf;
    cursor: not-allowed;
    border: 1px solid #f7a7a2;

    @include background(#F7C3C0);
  }
}
